@section('title', $archive->title . ' - ' . $archive->category->title . ' - ' . \Option::get('web_name'))
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between">
            <h2 class="font-semibold text-xl inline-flex items-center text-gray-800 leading-tight md:mr-auto">
                {{ $archive->title }}
            </h2>

            @auth
            @can('update', $archive)
                <a href="{{route('archives.edit', $archive)}}" class="btn-link mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/></svg>
                    {{ __('Edit') }}
                </a>
                <livewire:archives.delete :archive="$archive">
            @endcan
            @cannot('update', $archive)
                <livewire:actions.report :archive="$archive">
            @endcannot
            @endauth
        </div>
        @if($archive->content)
        <div class="text-sm mt-4">{{$archive->content}}</div>
        @endif
    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow sm:rounded-lg p-4">
                        <div class="relative" id="archive-{{$archive->id}}">
                            @foreach($archive->files as $file)
                                <div
                                    class="absolute cursor-pointer"
                                    x-data

                                    id="archive-{{$archive->id}}-file-{{$loop->index}}"
                                    @click="window.livewire.emit('showPreview', {{$archive->id}}, {{$loop->index}}, '{{$file->file_url}}')"
                                >
                                    <img src="{{$file->file_url }}?x-bce-process=style/show" />
                                </div>
                            @endforeach
                        </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            var archive = @json($archive);
        </script>
    @endpush
    @push('preview')
        @livewire('common.preview')
    @endpush
</x-app-layout>

